<template>
    <div class="order-refund-list-item" @click.stop="changeChecked">
        <van-checkbox class="order-refund-list-item-checkbox" :value="checked" :disabled="disabled"/>
        <van-card class="order-refund-list-item-card"
                  :title="name" :thumb="imageUrl" :num="quantity" :price="totalAmount"/>
    </div>
</template>

<script>
  import { Card, Checkbox } from "vant"

  export default {
    name: "OrderRefundApplySelectListItem",
    components: {
      [Card.name]: Card,
      [Checkbox.name]: Checkbox,
    },
    model: {
      prop: "checked",
      event: "change",
    },
    props: {
      disabled: Boolean,
      checked: Boolean,
      name: String,
      imageUrl: String,
      quantity: [String, Number],
      totalAmount: [String, Number],
    },
    methods: {
      changeChecked() {
        const { checked, disabled } = this
        if (disabled) {
          return
        }
        this.$emit("change", !checked)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .order-refund-list-item {
        display: flex;
        align-items: center;
        background: #fff;

        .order-refund-list-item-checkbox {
            margin-left: 16px;
        }

        .order-refund-list-item-card {
            background: inherit;
            padding: 8px;
            flex: 1;
        }
    }
</style>
